<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 常见问题 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-2 p-4">
      <view v-for="(item, index) in dataList" class="bg-[#FFFFFF] rounded-[.5rem]" :key="index">
        <view class="flex gap-2 justify-between items-center px-4 py-3" @click="toggleItem(index)">
          <view class="text-[.875rem] text-[#161A24] line-clamp-1">
            {{ String(index + 1).padStart(2, '0') }}：{{ item.title }}
          </view>
          <view class="size-5 flex-none">
            <image
              src="/static/dddr21.png"
              class="size-full"
              :style="!item.isOpen ? 'transform: rotate(180deg);' : ''"
              mode="aspectFill"
            />
          </view>
        </view>
        <view v-if="item.isOpen" class="px-4 py-3 text-[.8125rem] text-[#5C6068] border-t-[.0625rem] border-solid">
          {{ item.description }}
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false
      }
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.articleList({
          page,
          limit,
          code: 'qa'
        })
        this.$refs.paging.complete(
          res.data.map(item => ({
            ...item,
            isOpen: false
          }))
        )
      },
      toggleItem(index) {
        // 如果当前项已经打开，则关闭它
        if (this.dataList[index].isOpen) {
          this.dataList[index].isOpen = false
          return
        }

        // 关闭所有项
        this.dataList.forEach((item, i) => {
          item.isOpen = false
        })

        // 打开当前点击的项
        this.dataList[index].isOpen = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .size-full {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
  }
</style>
